<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-button slot="extra" type="primary" icon="plus" @click="$refs.form.create()">新建</a-button>
    <a-table rowKey="id" size="middle" :scroll="scroll" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="商品名称">
          <a-input allowClear :maxLength="18" autocomplete="off" placeholder="请输入商品名称" v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="商品类别">
          <a-select allowClear placeholder="请选择商品类别" style="width: 200px" v-decorator="['type']">
            <a-select-option :key="1">荤菜</a-select-option>
            <a-select-option :key="2">素菜</a-select-option>
          </a-select>
        </a-form-item>
        <sjht-search-submit hide-reset />
      </a-form>

      <div slot="action" class="table-action" slot-scope="text, record, index">
        <a @click.stop="$refs.form.update(record)">修改</a>
        <a-divider type="vertical" />
        <a-popconfirm :title="`确定删除【${record.name}】吗？`" placement="topLeft" @confirm="onDelete(record.id, index)">
          <a class="delete">删除</a>
        </a-popconfirm>
      </div>

      <a-popover slot="qrcode" slot-scope="text, record">
        <qrcode-vue slot="content" :value="'p:' + record.code" level="H"></qrcode-vue>
        <a-icon type="qrcode" />
      </a-popover>
      <span slot="price" slot-scope="text" class="sjht-price" v-if="text">{{ text }}</span>
      <a-tooltip slot="tip" slot-scope="text" placement="topLeft" class="sjht-cursor" v-if="text" :title="text">{{ text }}</a-tooltip>
    </a-table>
    <product-form ref="form" @success="onSuccess" />
  </a-card>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import { table, tableMore, tableAction, searchForm } from '../../utils/mixins'
import { PageList, DeleteProduct } from '../../api/product'
import { Popover } from 'ant-design-vue'
import ProductForm from './modules/form'

export default {
  name: 'ProductList',
  mixins: [table, tableMore, tableAction, searchForm],
  components: {
    QrcodeVue,
    [Popover.name]: Popover,
    [ProductForm.name]: ProductForm
  },
  data() {
    return {
      loadApi: PageList,
      deleteApi: DeleteProduct
    }
  },
  created() {
    this.columns.unshift({ title: '操作', key: 'operation', width: 90, align: 'center', scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: 'ID', dataIndex: 'id', width: 60 },
      { title: '二维码', key: 'qrcode', width: 60, align: 'center', scopedSlots: { customRender: 'qrcode' } },
      { title: '商品编码', dataIndex: 'code', width: 120 },
      { title: '商品名称', dataIndex: 'name', width: 200, ellipsis: true, scopedSlots: { customRender: 'tip' } },
      { title: '商品类型', dataIndex: 'type', width: 95, align: 'center', customRender: t => (t == 1 ? '荤菜' : t == 2 ? '素菜' : '未知') },
      { title: '商品价格', dataIndex: 'price', width: 75, align: 'right', scopedSlots: { customRender: 'price' } },
      { title: '商品数量', dataIndex: 'number', width: 75, align: 'center' },
      { title: '维生素A', dataIndex: 'vitaminA', width: 75, align: 'center' },
      { title: '维生素B', dataIndex: 'vitaminB', width: 75, align: 'center' },
      { title: '维生素C', dataIndex: 'vitaminC', width: 75, align: 'center' },
      { title: '创建时间', dataIndex: 'createTime', width: 145 },
      { title: '更新时间', dataIndex: 'updateTime', width: 145 }
    )
  },
  mounted() {
    this.loadData()
  }
}
</script>